<template>
    <div class="gongxiang">
        <ModalTitle title="执法信息资源共享分析"></ModalTitle>
        <div class="gongxiang-chart" ref="gongxiangChart"></div>
    </div>
</template>

<script>
import ModalTitle from '@/components/ModalTitle/Index.vue'
import { ZongHeZhiFaYunXDB } from '@/api/zhangzi'
export default {
    components: {
        ModalTitle
    },
    data() {
        return {

        }
    },

    mounted() {
        this.gongxiangChartData()
    },

    methods: {
        gongxiangChartData() {
            // 执法信息资源共享分析
            ZongHeZhiFaYunXDB.zongheZhiFaShuJiYouXiangAPI().then(res => {
                let count = []
                let name = []
                console.log(res, '执法信息资源共享分析');
                if (res.code == 200) {
                    res.data.forEach(item => {
                        count.push(item.count)
                        name.push(item.name)
                    })
                    this.gongxiangChartFn(count,name)
                }
            })
        },

        gongxiangChartFn(count,name) {
            let gongxiangChart = echarts.init(this.$refs.gongxiangChart)
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['数量'],
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: name,
                    axisLabel: {
                        textStyle: {
                            //坐标轴颜色
                            color: '#fff',
                            fontSize: "1rem"
                        }
                    },
                    axisLine: {
                        //y轴线的颜色以及宽度
                        show: true,
                    },
                    //坐标轴线样式
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: 'solid', //solid实线;dashed虚线
                            color: '#fff'
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            //坐标轴颜色
                            color: '#fff',
                            fontSize: "1rem"
                        }
                    },
                    axisLine: {
                        //y轴线的颜色以及宽度
                        show: true,
                    },
                    //坐标轴线样式
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid', //solid实线;dashed虚线
                            color: 'rgba(36, 173, 254, 0.2)'
                        }
                    },
                },
                series: [
                    {
                        name: '数量',
                        type: 'line',
                        symbol: 'circle',
                        showAllSymbol: true,
                        // seriesLayoutBy: 'row',
                        symbolSize: 12,
                        data: count,
                        lineStyle: {
                            color: '#27CAFF'
                        },
                        itemStyle: {
                            color: '#27CAFF',
                            borderColor: "@fff",
                            borderWidth: 2,
                            shadowColor: '#27CAFF',
                            shadowBlur: 2,
                            shadowOffsetY: 0,
                            shadowOffsetX: 0,
                        },
                    },
                ]
            };
            gongxiangChart.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.gongxiang {
    width: 100%;
    height: 31.5rem;

    .gongxiang-chart {
        width: 100%;
        height: 23.5rem;
        margin-top: 1.6rem;
    }
}
</style>